<template>
  <div class="login-container">
    <div class="login_box">
      <el-form
        ref="form"
        :rules="rules"
        :model="form"
        label-width="70px"
        class="login_form"
      >
        <h1 class="login_title">电商管理系统</h1>
        <el-form-item prop="username" label="用户名">
          <el-input
            prefix-icon="el-icon-user"
            v-model="form.username"
            placeholder="请输入用户名"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item prop="password" label="密码" class="rem">
          <el-input
            prefix-icon="el-icon-lock"
            v-model="form.password"
            placeholder="请输入密码"
            type="password"
            show-password
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-checkbox v-model="form.checked">记住密码</el-checkbox>
        </el-form-item>
        <el-form-item class="rem">
          <el-button
            type="primary"
            @click="submitForm"
            :loading="loading"
            class="btn"
            >登录</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
  name: "login",
  data() {
    return {
      loading: false, // 登录限制
      form: {
        username: "",
        password: "",
        checked: false,
      },
      rules: {
        username: [
          { required: true, message: "用户名不能为空", trigger: "blur" },
          { min: 2, max: 10, message: "用户名2-10位", trigger: "blur" },
        ],
        password: [
          { required: true, message: "密码不能为空", trigger: "blur" },
          { min: 6, max: 10, message: "密码6-10位", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    submitForm() {
      let self = this;
      self.$router.push("/home");
    },
  },
  mounted() {},
};
</script>
<style scoped lang="less">
.login-container {
  width: 100%;
  height: 100%; //需要把html,body宽高都设置为100%
  background: url(https://img0.baidu.com/it/u=748892035,3442169203&fm=26&fmt=auto)
    no-repeat;
    position: fixed;
  background-size: 100% 100%;
  .login_box {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    .login_form {
      width: 350px;
      background-color: rgb(255, 255, 255, 0.8);
      padding: 30px;
      border-radius: 20px;
      .login_title {
        text-align: center;
        margin-bottom: 20px;
      }
      .rem {
        margin-bottom: 0;
      }
      .btn {
        width: 100px;
      }
    }
  }
}
</style>